<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">
            <NSpace>
              <NForm
                ref="formRef"
                :model="formValue"
                :rules="rules"
                label-placement="left"
                :label-width="115"
                label-align="right"
                require-mark-placement="left"
              >
                <NSpace>
                  <NFormItem
                    label="分类名称:"
                    path="classificationName"
                  >
                    <NInput
                      v-model:value="formValue.classificationName"
                      placeholder="输入分类名称"
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="父级分类:"
                    path="parentCode"
                  >
                  <NTreeSelect
                    :options="listOption"
                    v-model:value="formValue.parentCode"
                    placeholder="请选择父级分类"
                    clearable
                    style="width: 250px"
                    key-field="classificationCode"
                    label-field="classificationName"
                    children-field="childList"
                  />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="状态:"
                    path="statusCode"
                  >
                    <NRadioGroup
                      v-model:value="formValue.statusCode"
                      name="radiogroup"
                    >
                      <n-space>
                        <NRadio
                          v-for="song in songs"
                          :key="song.value"
                          :value="song.value"
                        >
                          {{ song.label }}
                        </NRadio>
                      </n-space>
                    </NRadioGroup>
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="备注:"
                    path="notes"
                  >
                    <NInput
                      v-model:value="formValue.notes"
                      placeholder="输入备注"
                      style="width: 630px"
                      type="textarea"
                      :autosize="{
                        minRows: 5,
                        maxRows: 15
                      }"
                    />
                  </NFormItem>
                </NSpace>
              </NForm>
            </NSpace>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        取消
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="confirm"
        :disabled="loading"
        :loading="loading"
      >
        保存
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive, watch } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage,
  NSpin,
  NRadioGroup,
  NRadio,
  NTreeSelect
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import type { clueModel } from '@/api/clue'
import { keysOf } from '@/utils/object'
import type { DicTreeModel } from '@/api/dic'
import type { HttpResponse } from '@/utils/http'
const route = useRoute()
const tags = useTagStore().tags
const message = useMessage()
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const listOption =ref<DicTreeModel[] | undefined>()
const formValue = reactive({
  classificationName: '',
  parentCode: '',
  statusCode: '',
  notes: ''
})
const songs = ref<any>([])
const rules = {
  classificationName: {
    required: true,
    trigger: ['input','blur','change'],
    validator:(_:any,value:any)=>{
      if(value.length==0) return new Error('请输入分类名称')
      if(value.length>15) return new Error('分类名称字数不得超过15')
      return true
    }
  },
  parentCode: {
    required: true,
    message: '请选择父级分类',
    trigger: ['change', 'blur']
  },
  statusCode: {
    required: true,
    message: '请选择状态',
    trigger: ['blur','change']
  }
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
    tags.splice(index, 1)
if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 去掉空数组
const removeNullArray = (arr:any)=>{
      let arrNew = arr.map((it:any)=>{
        if(it.childList.length==0){
            delete it.childList
            
          }
          else{
            it.childList = removeNullArray(it.childList)
          }
          return it
        })
        return arrNew
}
//父级分类下拉
const getFunction = async () => {
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseCollectClassificationConfig',
    api: 'listTree'
  })
  if (error) return message.error(error.message)
  listOption.value = res.data.map((it:any)=>{
          if(it.childList.length==0){
            delete it.childList
            
          }
          else{
            it.childList = removeNullArray(it.childList)
          }
          return it
  })
}
//状态
const getZFunction = async () => {
  songs.value = []
  const [error, res] = await sendRequest<HttpResponse>({
    module: 'baseCollectClassificationConfig',
    api: 'listByParentCode',
    override: {
      params: {
        dicCode: 'A49'
      }
    }
  })
  if (error) return message.error(error.message)
  res.data.forEach((i: any) => {
    // @ts-ignore
    songs.value.push({ label: i.dicName, value: i.dicCode })
  })
}
//修改
const confirm = () => {
  formRef.value?.validate(async (err: any) => {
    if (err) return
    loading.value = true
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'baseCollectClassificationConfig',
      api: 'update',
      override: {
        data: {
          ...formValue
        }
      }
    })
    loading.value = false
    if (error) return message.error(error.message)
    message.success(res.msg)
    goBack()
  })
}
// 获取详情
const spinShow = ref(false)
const getDispatchInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<clueModel>>({
    module: 'baseCollectClassificationConfig',
    api: 'info',
    uri: {
      id: route.params.id as never
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  keysOf(res.data).forEach((e) => {
    // @ts-ignore
    formValue[e] = res.data[e]
  })
  spinShow.value = false
}
watch(
  () => route,
  () => {
    if (route.name == 'ClassificationEdit') {
      getDispatchInfo()
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  getFunction()
  getZFunction()
})
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
